/*
 * @Description: 登录模块
 * @Author: ziwei.ma
 * @Date: 2019-06-19 15:56:13
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-06-27 17:23:27
 */

<template>
  <div
    class="login-warpper baseBgColorNoActive flex-h flex-hsb"
    @click="jumpLogin"
  >
    <!-- 头像信息包裹层 -->
    <div class="user-details-warpper flex-h">
      <img
        :src="headPortrait"
        class="head-portrait"
      >
      <div class="user-details flex-v flex-hc">
        <span class="user-name">{{name}}</span>
        <span class="user-phone">{{phone}}</span>
      </div>
    </div>
    <!-- 邀请有礼 -->
    <div
      class="invite-warpper flex-h flex-vc flex-hc"
      v-show="isLogout"
      @click.stop="jumpInvite"
    >
      <span class="icon iconfont icon-gift-o"></span>
      <span>邀请有礼</span>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from 'vue-xiaobu-utils'
import { getAdInvite } from '../api/api.js'
import { goToPage } from '@/utils/JumpUtils'
import LoginMixinVue from './LoginMixin.vue'
export default {
  mixins: [LoginMixinVue],
  data() {
    return {
      isLogout: false // 控制邀请有礼是否显示
    }
  },
  mounted() {
    this.getUserDetails()
    this.getAdStatus()
  },
  methods: {
    // 获取邀请有礼的状态
    getAdStatus() {
      let EN_NAME = 'app_invite_enter_banner'
      if (this.isLogin === 1) {
        getAdInvite(EN_NAME).then(res => {
          if (res === 0) {
            this.isLogout = false
          } else {
            this.isLogout = true
          }
        })
      } else {
        this.isLogout = false
      }
    },
    // 点击按钮进入邀请有礼页面
    jumpInvite() {
      let date = new Date()
      // let referalCode = getUserInfo().REFERAL_CODE ? '&code=' + getUserInfo().REFERAL_CODE : ''
      goToPage('city-app/invite.html' + '?t=' + date.getTime() + '&code=' + getUserInfo().REFERAL_CODE)
    }
  },
  watch: {
    isLogin() {
      this.getAdStatus()
    }
  }
}
</script>

<style scoped>
.login-warpper {
  width: 750px;
  height: 280px;
}

/* 头像信息层 */
.user-details-warpper {
  height: 140px;
  margin: 90px 0 50px 40px;
}
/* 头像 */
.head-portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
/* 信息层 */
.user-details {
  margin-left: 40px;
}
/* 用户名 */
.user-name {
  max-width: 320px;
  height: 56px;
  line-height: 56px;
  font-size: 34px;
  color: #ffffff;
  white-space: nowrap; /*强制不换行*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*超出部分显示省略号*/
}
/* 电话号码 */
.user-phone {
  height: 33px;
  line-height: 33px;
  font-size: 26px;
  color: #97d7ff;
}
/* 邀请有礼 */
.invite-warpper {
  width: 170px; /*px*/
  height: 42px; /*px*/
  line-height: 42px; /*px*/
  border-radius: 100px;
  margin: 149px 40px 89px 0;
  color: #ffffff;
  text-align: center;
  border: 1px solid #ffffff; /*no*/
}
</style>
